前言

在昨天成功實現"日夜主題切換"功能後，我發現了一個問題：當我刷新網頁時，"日夜主題切換"功能的狀態會被重置，也就是說需要手動重新啟用。為了解決這個問題，我今天的目標是讓計時器不會因為網頁刷新而停止，以便持續自動監測時間。

解決"日夜主題切換"功能刷新後失效的問題

首先，我新增一個名為 setupAutoSwitch() 的方法，它的目的是在網頁載入時監測"日夜主題切換"功能的狀態。

我通過讀取本地存儲中的 autoSwitchEnabled 變數，如果其值為 true，就幫 autoSwitchButton 元素加上 selected 類別，表示日夜主題切換功能已啟用。

setupAutoSwitch() {
  const autoSwitchEnabled = localStorage.getItem("autoSwitchEnabled");

  if (autoSwitchEnabled === "true") {
    this.autoSwitchButton.classList.add("selected");
  }
}

接下來，我在 this.autoSwitchButton.classList.add("selected"); 下方添加了一個 if 條件句，以確保當前主題不等於夜間主題時才啟動 checkTheme() 方法。首先，我立刻執行一次 checkTheme() 方法，然後設置了一個計時器。

if (this.nowTheme !== "night-theme") {
  this.checkTheme();
  this.autoSwitchInterval = setInterval(() => this.checkTheme(), 60000);
}

最後，我將這個方法添加到 constructor() 中。這樣，當我們重新刷新頁面時，網頁將持續保持"日夜主題切換"功能的狀態，就不再需要手動重新啟用計時器了。